<template>
  <div class="blog-search blog-section card-item">
    <el-input
        v-model="blogStore.searchBlogKeyword"
        @input="searchBlogClick"
        clearable
        placeholder="搜索博客文章..."
    />

    <div v-if="blogStore.searchBlogList.length > 0"
         v-loading="blogStore.isSearching"
         element-loading-text="正在搜索中..."
         class="blog-results">
      <h3 class="results-title">找到 {{ blogStore.searchBlogList.length }} 篇相关博客</h3>

      <div v-for="(blog, index) in blogStore.searchBlogList"
           :key="index" class="blog-card card-item">
        <h4 class="blog-title">{{ blog.title }}</h4>
        <div class="blog-excerpt" v-html="blog.highlight" />

        <router-link :to="`/overview/detail/${blog.id}`" class="read-more">阅读全文</router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBlogStore } from '@/store/blog'
import { onMounted } from 'vue'

const blogStore = useBlogStore()

onMounted(() => {
  blogStore.searchBlogKeyword = ''
  blogStore.searchBlogList = []
})

const searchBlogClick = async (value: string) => {
  if (!value) {
    blogStore.searchBlogList = []
    return
  }

  await blogStore.searchBlog(value)
}
</script>

<style lang="scss">
.blog-search {
  padding: 20px;

  .search-box {
    display: flex;
    gap: 10px;
  }

  .blog-results {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .results-title {
      color: #333;
      margin-bottom: 25px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }

    .blog-card {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;

      .blog-title {
        color: #2c3e50;
        margin: 0 0 10px 0;
        font-size: 1.4rem;
      }

      .blog-excerpt {
        color: #34495e;
        line-height: 1.6;
      }

      .read-more {
        display: inline-block;
        color: #009FA8;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
      }

      .read-more:hover {
        color: #009FA8;
        text-decoration: underline;
      }
    }

    .blog-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }
  }
}
</style>
